import 'package:acgn_pioneer/plugin/dialog/src/constants.dart';
import 'package:acgn_pioneer/plugin/dialog/src/dialog.dart';
import 'package:acgn_pioneer/widgets/reader/services/sr_chapter.dart';
import 'package:event_bus/event_bus.dart';
import 'package:flutter/widgets.dart';

import '../../public.dart';
import 'events/_index.dart';

/// 目录
class ReaderCatalog extends StatefulWidget {
  ReaderCatalog(
      {Key key,
      @required this.textStyle,
      this.currentChpaterId,
      this.comicInfo,
      this.comicIds,
      this.bus})
      : super(key: key);

  final EventBus bus;

  /// 文字样式
  final TextStyle textStyle;

  /// 当前阅读实例漫画队列
  final List<dynamic> comicIds;

  /// 当前选中章节id
  final int currentChpaterId;

  /// 漫画
  final ComicModel comicInfo;

  @override
  ReaderCatalogState createState() => new ReaderCatalogState();
}

class ReaderCatalogState extends State<ReaderCatalog> {
  ReaderChapterService chapterService = ReaderChapterService();
  List<ChapterModel> list = []; // 章节列表
  bool isAsc = true; // 默认正序

  @override
  void initState() {
    super.initState();
    list = widget.comicInfo.chapters;
  }

  reverseList() {
    isAsc = !isAsc;
    list = list.reversed.toList();
  }

  @override
  void dispose() {
    super.dispose();
  }

  cliShow() {
    ACGNDialog(context,
        alignment: Alignment.bottomCenter,
        clipBehavior: Clip.antiAlias,
        backgroundColor: Color(0xff1B1B26),
        transition: DialogTransition(
          duration: Duration(milliseconds: 500),
          builder: (context, animation, secondaryAnimation, child) {
            return FractionalTranslation(
              translation: Offset(0, 1 - animation.value),
              child: child,
            );
          },
        ),
        shape: RoundedRectangleBorder(
          side: BorderSide.none,
        ),
        barrier: DialogBarrier(
            barrierDismissible: true,
            barrierColor: ColorUtil.rgba(0, 0, 0, 0.25)),
        body: DialogBody(
            isScorll: false,
            content: StatefulBuilder(builder: (context, setState) {
              return body(setState);
            }))).show();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
        Text(
          '目录',
          style: widget.textStyle,
        ),
        SVG.icon('arrow_right',
            size: widget.textStyle.fontSize, color: widget.textStyle.color),
      ]),
      onTap: () {
        cliShow();
      },
    );
  }

  /// 构建目录容器
  body(setState) {
    return Container(
        width: double.infinity,
        height: Rem(457),
        padding: EdgeInsets.all(Rem(6)),
        alignment: Alignment.topLeft,
        decoration: BoxDecoration(
            color: Color(0xff1B1B26),
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(20), topRight: Radius.circular(20))),
        child: DefaultTextStyle(
          style: TextStyle(
            color: Color(0x66FFFFFF),
            fontSize: 12,
          ),
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    '共${list.length}话可免费畅读',
                    style: TextStyle(color: Colors.white, fontSize: 16),
                  ),
                  Text('  连载中', style: TextStyle(fontSize: 14)),
                  Expanded(
                    child: Text(''),
                  ),
                  InkWell(
                    child: Text('正序',
                        style: TextStyle(
                            fontSize: 12,
                            color: isAsc ? Color(0xffFFD73B) : Colors.white)),
                    onTap: () {
                      if (isAsc) {
                        return;
                      }
                      reverseList();
                      setState(() {});
                    },
                  ),
                  Text(' | '),
                  InkWell(
                    child: Text('倒序',
                        style: TextStyle(
                            fontSize: 12,
                            color: isAsc ? Colors.white : Color(0xffFFD73B))),
                    onTap: () {
                      if (!isAsc) {
                        return;
                      }
                      reverseList();
                      setState(() {});
                    },
                  )
                ],
              ),
              buildGridView(),
            ],
          ),
        ));
  }

  /// 构建目录区域
  buildGridView() {
    return Container(
        margin: EdgeInsets.only(top: 8),
        height: Rem(386),
        child: GridView.builder(
            shrinkWrap: true,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 78 / 44,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10),
            itemCount: list.length,
            itemBuilder: (context, index) {
              var chapter = list[index];
              return Container(
                  padding: EdgeInsets.only(left: 4),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: Color(0xff282838),
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: InkWell(
                    child: Text(
                      chapter.name,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: widget.currentChpaterId == chapter.id
                            ? Color(0xffFFD73B)
                            : Colors.white,
                      ),
                    ),
                    onTap: () {
                      widget.bus
                          .fire(ReaderRedirectChapterIndexEvent(chapter.id));
                      Navigator.pop(context);
                    },
                  ));
            }));
  }
}
